<template>
	<view class="container">
		<view class="top-view">
			<classes-view @change="classChange"/>
			<date-select-view @change="dateChange"></date-select-view>
		</view>

		<view v-for="(item, index) in list" class="item" @click="itemClick(item)" :key="index">
			<view class="children-view">
				<children-head-view 
					:gender="item.gender"
					:imgUrl="item.imgUrl"
				/>
				<text class="name">{{item.name}}</text>
			</view>
			<view v-if="item.record !== null" class="record-view">
				<view>
					<text>睡眠:{{item.record.sleepStatus || ''}}</text>
					<u-rate v-if="item.record.sleepCount>0" v-model="item.record.sleepStatusVal" size="30" active-color="#DA473A"></u-rate>
				</view>
				<view>
					<text>饮食：{{item.record.feedingStatus || ''}}</text>
				</view>
				<view>
					<text>体温：{{`${item.record.temperature / 10}度` || ''}}</text>
				</view>
				<view>
					<text>如厕：{{item.record.pottyStatus || ''}}</text>
				</view>
				<view>
					<text>托药：{{item.record.medicationStatus || ''}}</text>
				</view>
			</view>
			<view v-else>
				<u-button size="mini" @click="addRecord(item)">添加</u-button>
			</view>
		</view>
		<record-type-select ref="refRecordType" :children="children"></record-type-select>
	</view>
</template>

<script>
	import { getDailyList } from '@/api/record.js'
	import { formatDateByTimestamp } from '@/utils/utils.js'
	import ChildrenHeadView from '@/components/children-head-view.vue'
	import ClassesView from '@/components/classes-view.vue'
	import DateSelectView from '@/components/date-select-view.vue'
	import XButton from '@/components/x-button.vue'
	import RecordTypeSelect from '@/pages_sub/record/components/record-type-select.vue'
 	export default {
		components: {
			ChildrenHeadView,
			ClassesView,
			DateSelectView,
			XButton,
			RecordTypeSelect
		},
		data() {
			return {
				list: [],
				
				classId: '',
				daily: formatDateByTimestamp(Date.now(), 'yyyy/mm/dd'),
				children: null,
			}
		},
		onLoad() {
		},
		methods: {
			itemClick(item) {
				if (item.record !== null) {
					console.log(item);
					let children = {
						id: item.childId,
						name: item.name,
						gender: item.gender,
						month: item.month,
						imgUrl: item.imgUrl,
						daily: this.daily,
						birthday: item.birthday
					}
					this.$u.route({
						url: 'pages_sub/record/daily-children-page',
						params: children
					})
				}
			},
			
			getDaily() {
				console.log(this.classId);
				console.log(this.daily);
				getDailyList(this.classId, this.daily).then(res => {
					console.log(res);
					this.list = res.data.content;
				})
			},
			
			dateChange(res) {
				console.log(res);
				this.daily = formatDateByTimestamp(res.timestamp, 'yyyy/mm/dd');
				this.getDaily();
			},
			
			classChange(res) {
				console.log(res);
				this.classId = res.id;
				this.getDaily();
			},
			
			addRecord(item) {
				let children = {
					id: item.childId,
					name: item.name,
					gender: item.gender,
					month: item.month,
					imgUrl: item.imgUrl
				}
				this.children = children;
				this.$refs.refRecordType.open();
			}
		}
	}
</script>

<style lang="scss">
	.container{
		display: flex;
		flex-direction: column;
		background-color: $app-page-bg-color;
		padding-left: 30rpx;
		padding-right: 30rpx;
		
		.top-view{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
	}
	
	.item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		
		.children-view{
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.name{
				margin-top: 10rpx;
				color: $app-font-color;
				font-size: $app-font-size-md;
			}
		}
		
		.record-view{
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			margin-left: 40rpx;
		}
	}
</style>
